<template>
	<view>
		<!-- 新增录入框 -->
		<uni-popup ref="inputDialog" :mask-click="false">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<scroll-view class="scroll-Y" scroll-y="true">
					<uni-forms ref="baseForm" :modelValue="form">
						<uni-forms-item label="报修时间" required :labelWidth='80' class="uni-forms-item-bottom">
							<uni-datetime-picker type="datetime" v-model="form.reportRepairTime" :clear-icon="false"/>
						</uni-forms-item>
						<uni-row>
							<uni-col :span="22">
								<uni-forms-item label="设备" required :labelWidth='80' class="uni-forms-item-bottom">
									<uni-data-select v-model="form.equipmentId" :localdata="equipmentList"
										style="background-color: #fff;" @change="selectEquipment">
									</uni-data-select>
								</uni-forms-item>
							</uni-col>
							<uni-col :span="2">
								<uni-icons type="scan" size="30"></uni-icons>
							</uni-col>
						</uni-row>
						<uni-forms-item label="完成时间"  :labelWidth='80' class="uni-forms-item-bottom">
							<uni-datetime-picker type="datetime" v-model="form.finishTime" :clear-icon="false" />
						</uni-forms-item>
						<uni-forms-item label="维修人"  :labelWidth='80' class="uni-forms-item-bottom">
							<uni-data-select v-model="form.repairUserId" :localdata="userList"
								style="background-color: #fff;" @change="selectRepairUser">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="单据状态" required :labelWidth='80' class="uni-forms-item-bottom">
							<uni-data-select v-model="form.status" :localdata="statusOptions" :clear="false"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="处理结果"  :labelWidth='80' class="uni-forms-item-bottom">
							<uni-data-checkbox v-model="form.repairResult" :localdata="repairResultList" style='margin-top: 10rpx;'/>
						</uni-forms-item>
						<uni-forms-item label="备注"  :labelWidth='80' class="uni-forms-item-bottom">
							<uni-easyinput v-model="form.remark" />
						</uni-forms-item>
						<uni-row>
							<uni-col :span="8">
								<button size="mini" @click="addEntry()" style="background-color: #F5B800;">添加项目</button>
							</uni-col>
						</uni-row>
						<view v-for="(item,index) in form.repairOrderEntryList">
							<uni-row>
								<uni-col :span="22">
									<uni-card style="margin-left: 5rpx;margin-top: 3rpx;">
										<uni-forms-item label="项目" required :labelWidth='80'
											class="uni-forms-item-bottom">
											<uni-data-select v-model="item.itemId" :localdata="itemList"
												style="background-color: #fff;" @change="selectItem($event,index)" />
										</uni-forms-item>
										<uni-forms-item label="故障描述"  :labelWidth='80'
											class="uni-forms-item-bottom">
											<uni-easyinput v-model="item.remark"  />
										</uni-forms-item>
									</uni-card>
								</uni-col>
								<uni-col :span="2" style="padding-top: 100rpx">
									<uni-icons type="close" size="33" @click="deleteEntry(index)"></uni-icons>
								</uni-col>
							</uni-row>
						</view>
						<view class="button-group">
							<button type="primary" size="mini" @click="cancel()" plain="true">取消</button>
							<button type="primary" size="mini" @click="submit()">提交</button>
						</view>
					</uni-forms>
				</scroll-view>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import {
		getUserProfile
	} from "@/api/system/user"

	import {
		getDicts
	} from "@/api/system/dict/data";
	import {
		listRepairOrder,
		getRepairOrder,
		delRepairOrder,
		addRepairOrder,
		updateRepairOrder
	} from "@/api/equipment/repairOrder";
	import {
		listEquipment
	} from "@/api/equipment/equipment";
	import {
		listInspectionItem
	} from "@/api/equipment/inspectionItem";
	export default {
		name: "repairOrderForm",
		data() {
			return {
				queryParams: {
					params: {},
				},
				form: {},
				equipmentList: [],
				repairOrderEntryList :[],
				statusOptions: [],
				userList:[],
				repairResultList:[{
					text: '修复成功',
					value: 'A'
				}, {
					text: '报废',
					value: 'B'
				}, {
					text: '其他',
					value: ''
				}],
				itemList:[]
			}
		},
		created() {
			this.getStatusOptions();
			this.getEquipmentList();
			this.getInspectionItem();
			this.reset();
			
		},
		methods: {
			openPopup(id) {
				//如果是编辑操作
				if(typeof(id)!="undefined"){
					console.log("编辑操作")
					getRepairOrder(id).then(res =>{
						this.form = res.data;
					})
				}
				this.$refs.inputDialog.open();
			},
			cancel() {
				this.$refs.inputDialog.close();
				this.reset();
			},
			reset() {
				this.queryParams = {};
				getUserProfile().then(response => {
					let user = response.data
					this.userList=[
						{text: user.nickName,
						value: user.userId}
					];
					this.form = {
						status: "A",
						reportRepairTime: new Date().format("yyyy-MM-dd HH:mm:ss"),
						finishTime:new Date().format("yyyy-MM-dd HH:mm:ss"),
						repairOrderEntryList: [],
					}
				})

			},
			addEntry() {
				let list = this.form.repairOrderEntryList;
				for (var i = 0; i < list.length; i++) {
					if (typeof(list[i].itemId) == "undefined") {
						return;
					}
				}
				let entry = {
					remark: ''
				}
				list.push(entry)
			},
			deleteEntry(index) {
				this.form.repairOrderEntryList.splice(index, 1);
			},
			submit() {
				console.log("this.form.id===>",this.form.id)
				if(typeof(this.form.id)==="undefined"){
					//新增
					addRepairOrder(this.form).then(response => {
						this.$refs.inputDialog.close();
						this.reset();
						this.$tab.redirectTo("/pages/equipment/repairOrder/index");
					})
				}else{
					//编辑
					updateRepairOrder(this.form).then(res =>{
						this.$refs.inputDialog.close();
						this.reset();
						this.$tab.redirectTo("/pages/equipment/repairOrder/index");
					})
				}
				
			},
			selectEquipment(id) {
				let opt = {};
				opt = this.equipmentList.find((item) => {
					return item.id === id;
				});
				this.form.equipmentName = opt.text;
				this.form.equipmentNumber = opt.number;
				this.form.equipmentBrand = opt.brand
				this.form.equipmentSpecification =opt.specification
				this.form.equipmentType =opt.type;
			},
			getEquipmentList() {
				listEquipment({pageSize:99999}).then( res =>{
					let list = res.rows;
					for (let i = 0; i < list.length; i++) {
						list[i].value = list[i].id;
						list[i].text = list[i].name
					}
					this.equipmentList = list;
				})
			},
			getStatusOptions(){
				getDicts("repair_order_status").then(response => {
					let list =  response.data;
					for (let i = 0; i < list.length; i++) {
						list[i].value = list[i].dictValue;
						list[i].text = list[i].dictLabel;
					}
					this.statusOptions = list;
					console.log("list====》",list)
				});
			},
			selectRepairUser(id){
				let opt = {};
				opt = this.userList.find((item) => {
					return item.value === id;
				});
				this.form.repairUserName = opt.text;
			},
			getInspectionItem(){
				listInspectionItem({pageSize:99999}).then( res =>{
					let list = res.rows;
					for (let i = 0; i < list.length; i++) {
						list[i].value = list[i].id;
						list[i].text = list[i].name
					}
					this.itemList = list;
				})
			},
			selectItem(id,index){
				let opt = {};
				opt = this.itemList.find((item) => {
					return item.id === id;
				});
				this.form.repairOrderEntryList[index].itemNumber = opt.number;
				this.form.repairOrderEntryList[index].itemName = opt.name;
				this.form.repairOrderEntryList[index].itemType = opt.type;
			}
		}

	}
</script>
<style>
	.example {
		padding: 16rpx;
		margin: 0rpx;
		background-color: #fff;
		width: 720rpx;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.bg-purple-light {
		border-radius: 4px;
		min-height: 36px;
		background: #FFFFFF;
	}

	.scroll-Y {
		height: 1100rpx;
		width: 96%;
	}

	.uni-forms-item-bottom {

		margin-bottom: 8rpx;
	}
</style>
